<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="form" :inline="true">
        <el-form-item label="账号">
          <el-input v-model.trim="form.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model.trim="form.password"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model.trim="form.sex"></el-input>
        </el-form-item>
        <el-form-item label="角色ID">
          <el-input v-model.trim="form.roleId"></el-input>
        </el-form-item>
        <el-form-item label="组织ID">
          <el-input v-model.trim="form.deptId"></el-input>
        </el-form-item>
        <el-form-item label="账号名称">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model.trim="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="创建人ID">
          <el-input v-model.trim="form.creatorId"></el-input>
        </el-form-item>
        <el-form-item label="修改人ID">
          <el-input v-model.trim="form.updateId"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model.trim="form.createTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修改时间">
          <el-date-picker
            v-model.trim="form.updateTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="删除标志（0代表存在 1代表删除）">
          <el-input v-model.trim="form.isDelete"></el-input>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-input v-model.trim="form.status"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCheck" icon="el-icon-search"
            >查询</el-button
          >
          <el-button type="info" @click="handleReset" icon="el-icon-refresh"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div style="margin-bottom: 20px">
        <el-button
          type="primary"
          @click="handleAdd('新增')"
          icon="el-icon-plus"
          size="mini"
          >新增</el-button
        >
      </div>
      <el-table
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        border
      >
        <el-table-column label="用户id" prop="id"> </el-table-column>
        <el-table-column label="账号" prop="account"> </el-table-column>
        <el-table-column label="密码" prop="password"> </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column label="角色ID" prop="roleId"> </el-table-column>
        <el-table-column label="组织ID" prop="deptId"> </el-table-column>
        <el-table-column label="账号名称" prop="name"> </el-table-column>
        <el-table-column label="手机号" prop="phone"> </el-table-column>
        <el-table-column label="创建人ID" prop="creatorId"> </el-table-column>
        <el-table-column label="修改人ID" prop="updateId"> </el-table-column>
        <el-table-column label="创建时间" prop="createTime"> </el-table-column>
        <el-table-column label="修改时间" prop="updateTime"> </el-table-column>
        <el-table-column
          label="删除标志（0代表存在 1代表删除）"
          prop="isDelete"
        >
        </el-table-column>
        <el-table-column label="用户状态" prop="status"> </el-table-column>
        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑">
              <el-button
                type="info"
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(scope.row, '编辑')"
              ></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除">
              <el-button
                type="info"
                icon="el-icon-delete"
                size="mini"
                @click="handleDelete(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size.sync="size"
        :current-page.sync="current"
        @current-change="handleChange"
      >
      </el-pagination>
      <userSave ref="modalForm" @ok="medelok"> </userSave>
    </el-card>
  </div>
</template>

<script>
//{
//path: "/userTable",
//name: "/userTable",
//component: () =>
//import("@/views/pages/user/UserTable")
//},
import { getAction } from "@/api/manage";
import { publicdata } from "@/minxins/public";

import userSave from "./components/UserSave";

export default {
  name: "userTable",
  mixins: [publicdata],
  data() {
    return {
      dataList: [],
      total: 0,
      size: 12,
      current: 1,
      url: {
        delete: "/user/deleteById",
        list: "/user/pageList",
      },
      form: {
        id: "",
        account: "",
        password: "",
        sex: "",
        roleId: "",
        deptId: "",
        name: "",
        phone: "",
        creatorId: "",
        updateId: "",
        createTime: "",
        updateTime: "",
        isDelete: "",
        status: "",
      },
    };
  },
  components: {
    userSave,
  },
  mounted() {
    // this.loadData();
  },
  methods: {
    // 获取表格数据
    loadData() {
      const params = {
        current: this.current,
        size: this.size,
        id: this.form.id,
        account: this.form.account,
        password: this.form.password,
        sex: this.form.sex,
        roleId: this.form.roleId,
        deptId: this.form.deptId,
        name: this.form.name,
        phone: this.form.phone,
        creatorId: this.form.creatorId,
        updateId: this.form.updateId,
        createTime: this.form.createTime,
        updateTime: this.form.updateTime,
        isDelete: this.form.isDelete,
        status: this.form.status,
      };
      //   getAction(this.$api.baseurl + this.url.list, params)
      //     .then((res) => {
      //       if (res.data.code == 200) {
      //         this.dataList = res.data.data.records;
      //         this.total = res.data.data.total;
      //       } else {
      //         this.$message.info(res.data.msg);
      //       }
      //     })
      //     .catch((err) => {});
    },
  },
};
</script>

<style scoped></style>
